<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  stock: String,
  timeFrame: String
});

const explanation = ref(null);
const factors = ref([]);

onMounted(async () => {
  // 初始化预测解释数据
});

watch([() => props.stock, () => props.timeFrame], async () => {
  // 更新预测解释
});
</script>

<template>
  <div class="h-full">
    <h2 class="text-lg font-semibold mb-4">预测解释</h2>
    
    <!-- 预测解释概要 -->
    <div class="bg-blue-50 p-4 rounded-lg mb-4">
      <p class="text-blue-800">
        {{ explanation || '基于技术指标和市场情绪分析，预计该股票在短期内呈上涨趋势。主要受益于强劲的市场动量和积极的投资者情绪。' }}
      </p>
    </div>

    <!-- 影响因素分析 -->
    <div class="grid grid-cols-2 gap-4">
      <!-- 正面因素 -->
      <div class="bg-green-50 p-4 rounded-lg">
        <h3 class="text-sm font-semibold text-green-700 mb-2">利好因素</h3>
        <ul class="space-y-2">
          <li class="flex items-center">
            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
            <span>MACD金叉信号</span>
          </li>
          <li class="flex items-center">
            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
            <span>成交量持续放大</span>
          </li>
          <li class="flex items-center">
            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
            <span>市场情绪积极</span>
          </li>
        </ul>
      </div>

      <!-- 负面因素 -->
      <div class="bg-red-50 p-4 rounded-lg">
        <h3 class="text-sm font-semibold text-red-700 mb-2">风险因素</h3>
        <ul class="space-y-2">
          <li class="flex items-center">
            <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
            <span>短期超买迹象</span>
          </li>
          <li class="flex items-center">
            <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
            <span>阻力位接近</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 模型决策路径 -->
    <div class="mt-4 bg-gray-50 p-4 rounded-lg">
      <h3 class="text-sm font-semibold mb-2">预测模型分析</h3>
      <div class="space-y-2">
        <div class="flex items-center justify-between">
          <span>技术分析模型</span>
          <span class="text-blue-600">权重: 45%</span>
        </div>
        <div class="flex items-center justify-between">
          <span>情绪分析模型</span>
          <span class="text-blue-600">权重: 30%</span>
        </div>
        <div class="flex items-center justify-between">
          <span>资金流向模型</span>
          <span class="text-blue-600">权重: 25%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 组件特定样式 */
</style>